import { infoSystemAtom } from '@/store'
import { useAtomValue } from 'jotai'
import type { ComponentProps } from 'react'

export const InfoSystem: React.FC<ComponentProps<'div'>> = (props) => {
  const infoSystem = useAtomValue(infoSystemAtom)

  if (!infoSystem) {
    return (
      <div
        {...props}
        className={`card bg-white/70 backdrop-blur-sm shadow-lg border border-slate-200/50 hover:shadow-xl transition-all duration-300  ${props.className || ''}`}
      >
        <div className="card-body p-1">
          <h2 className="card-title text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
            <div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"></div>
            系统信息
          </h2>
          <div className="flex items-center justify-center py-8">
            <div className="loading loading-spinner loading-md text-indigo-500"></div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div
      {...props}
      className={`card bg-white/70 backdrop-blur-sm shadow-lg border border-slate-200/50 hover:shadow-xl transition-all duration-300 ${props.className || ''}`}
    >
      <div className="card-body p-6">
        <h2 className="card-title text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
          <div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"></div>
          系统信息
        </h2>
        <div className="space-y-3 text-sm">
          <div className="flex justify-between items-center py-2 px-3 bg-slate-50/50 rounded-lg">
            <span className="font-medium text-slate-600">主机名:</span>
            <span className="text-right text-slate-800 font-mono">{infoSystem.hostname}</span>
          </div>
          <div className="flex justify-between items-center py-2 px-3 bg-slate-50/50 rounded-lg">
            <span className="font-medium text-slate-600">架构:</span>
            <span className="text-right text-slate-800 font-mono">{infoSystem.arch}</span>
          </div>
          <div className="flex justify-between items-center py-2 px-3 bg-slate-50/50 rounded-lg">
            <span className="font-medium text-slate-600">平台:</span>
            <span className="text-right text-slate-800 font-mono">{infoSystem.platform}</span>
          </div>
          <div className="flex justify-between items-center py-2 px-3 bg-slate-50/50 rounded-lg">
            <span className="font-medium text-slate-600">CPU:</span>
            <span className="text-right text-slate-800 font-mono text-xs">{infoSystem.cpu}</span>
          </div>
          <div className="flex justify-between items-center py-2 px-3 bg-slate-50/50 rounded-lg">
            <span className="font-medium text-slate-600">总内存:</span>
            <span className="text-right text-slate-800 font-mono">{infoSystem.totalMem}</span>
          </div>
        </div>
      </div>
    </div>
  )
}
